<script setup>
import request from '@/utils/request'
import { EditPen } from '@element-plus/icons-vue'
import { onMounted, ref, watch } from 'vue'

const tableData = ref([])
const total = ref(0)
onMounted(() => {
    select()
})

const currentPage = ref(1)
const pageSize = ref(5)

const handleSizeChange = (val) => {
    pageSize.value = val

}
const handleCurrentChange = (val) => {
    currentPage.value = val
}
watch([currentPage, pageSize], () => {
    select()
})

const form = ref({
    userId: '',
    type: ''
})

const reset = () => {
    form.value.userId = ''
    form.value.type = ''
    currentPage.value = 1
    select()
}

const select = async () => {
    const res = await request.get('/order', {
        params: {
            userId: form.value.userId,
            type: form.value.type,
            page: currentPage.value,
            pageSize: pageSize.value
        }
    })
    console.log(res)
    tableData.value = res.data.data.record
    total.value = res.data.data.total
}

const last = async (id, type) => {
    if (type == 1) {
        await request.post('/editorder', { id: id, type: 2 })
        select()
        ElMessage({
            type: 'success',
            message: '订单已发货'
        })
        return
    }
    if (type == 2) {
        ElMessage({
            type: 'error',
            message: '订单已发货'
        })
        return
    }
}

</script>
<template>
    <h1 class="title">->订单管理</h1>
    <el-form :model="form" :inline="true" class="form">
        <el-form-item label="用户ID:">
            <el-input v-model="form.userId" placeholder="请输入查找id" />
        </el-form-item>
        <el-form-item label="类型:">
            <el-input v-model="form.type" placeholder="1:未发货;2:已发货" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="select">查找</el-button>
        </el-form-item>
        <el-form-item>
            <el-button type="info" @click="reset">重置</el-button>
        </el-form-item>
    </el-form>
    <el-table :data="tableData" class="table">
        <el-table-column type="expand">
            <template #default="props">
                <div m="4">
                    <h3>商品类型</h3>
                    <el-table :data="props.row.cartInfos">
                        <el-table-column label="Id" prop="id" />
                        <el-table-column label="bookId" prop="bookId" />
                        <el-table-column label="书名" prop="bookname" />
                        <el-table-column label="数量" prop="num" />
                        <el-table-column label="收货姓名" prop="name" />
                        <el-table-column label="收货手机" prop="phone" />
                        <el-table-column label="收货地址" prop="address" />
                        <el-table-column label="下单时间" prop="time" />
                    </el-table>
                </div>
            </template>
        </el-table-column>
        <el-table-column prop="id" label="id" width="80" />
        <el-table-column prop="userId" label="用户id" />
        <el-table-column prop="time" label="下单时间" />
        <el-table-column prop="type" label="类型">
            <template #default="{ row }">
                <div v-if="row.type == 1" style="color: red;">未发货</div>
                <div v-else style="color: aqua;">已发货</div>
            </template>
        </el-table-column>
        <el-table-column prop="name" label="收获姓名" />
        <el-table-column prop="address" label="收获地址" />
        <el-table-column prop="phone" label="收获手机" />
        <el-table-column label="修改状态">
            <template #default="{ row }">
                <el-button type="primary" circle :icon="EditPen" @click="last(row.id, row.type)"></el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="total" class="page">
    </el-pagination>
</template>
<style scoped lang="scss">
.title {
    // text-align: center;
    margin-left: 8px;
}

.form {
    margin-top: 38px;
}

.table {
    width: 100%;
}

.page {
    margin-top: 18px;
    float: right;
    margin-right: 38px;
}
</style>